<template>
	<view class="order">
		<view class="msglist code" v-if="datalist.orderState == 9">
			<view class="title">二维码</view>
			<view class="qrimg">
				{{ datalist.stationVerfiCode }}
				<tki-qrcode ref="qrcode" :val="datalist.stationVerfiCode" size="300" unit="upx" />
			</view>
			<view class="tip">在检测站出示该二维码</view>
		</view>
		<view class="msglist">
			<view class="title">费用信息</view>
			<view class="list">
				代驾服务
				<text>¥{{ datalist.driverFee }}</text>
			</view>
		</view>
		<view class="msglist">
			<view class="title">订单信息</view>
			<view class="list">
				产品
				<text>代驾审车办理</text>
			</view>
			<view class="list">
				订单号
				<text>{{ datalist.orderNum }}</text>
			</view>
			<view class="list">
				车牌号
				<text>{{ datalist.carNum }}</text>
			</view>
			<view class="list">
				车辆类型
				<text>{{ datalist.carType}}</text>
			</view>
			<view class="list">
				动力类型
				<text>{{ datalist.fuelTypeEnum }}</text>
			</view>
			<view class="list">
				座位数
				<text>{{ datalist.seat }}座</text>
			</view>
			<view class="list">
				使用性质
				<text>{{ datalist.useTypeEnum }}</text>
			</view>
			<view class="list" v-if="more">
				下单时间
				<text>{{ datalist.gmtTime }}</text>
			</view>
			<view class="list" v-if="more">
				客户姓名
				<text>{{ datalist.contactName }}</text>
			</view>
			<view class="list" v-if="more && (datalist.orderState != 1||datalist.orderState>=18)" @click="gotelSattion(datalist.contactMobile)">
				客户电话
				<text class="golden">{{datalist.contactMobile}}</text>
			</view>
			<view class="list" v-if="more">
				取还车地址
				<text class="golden"  @click="gorouter(datalist.pickCoordinate)">{{ datalist.pickAddr }}</text>
				<uni-icons class="map-pin-ellipse"></uni-icons>
			</view>
			<view class="list" v-if="more && datalist.orderState == 1">
				取还车距离
				<text class="golden">{{ datalist.distance }} KM</text>
			</view>
			<view class="list" v-if="more">
				预约时间
				<text>{{ datalist.bookTime }}</text>
			</view>
			<view class="list" v-if="more && datalist.orderState > 4">
				检测站位置
				<text class="golden" @click="gorouter(datalist.stationLoc)">{{ datalist.stationName }}</text>
			</view>
			
			<view class="list" v-if="more && datalist.orderState != 1" @click="gotelSattion(datalist.stationMobile)">
				检测站电话
				<text class="golden">{{datalist.stationMobile}}</text>
			</view>
			<view class="list" v-if="more && datalist.orderImg&& datalist.orderState > 5">
				已上传照片
				<view class="imglist">
					<view class="listimg" v-if="datalist.orderImg.carFrontLeft" @click="goImage(orderImg.carFrontLeft)">
                    <image :src="showImg(orderImg.carFrontLeft)" mode="aspectFill"></image>
						<view class="text">左前45度</view>
					</view>
					<view class="listimg" v-if="datalist.orderImg.carBackRight" @click="goImage(orderImg.carBackRight)">
						<image :src="showImg(orderImg.carBackRight)" mode="aspectFill"></image>
						<view class="text">右后45度</view>
					</view>
					<view class="listimg" v-if="datalist.orderImg.carTrunk" @click="goImage(orderImg.carTrunk)">
						<image :src="showImg(orderImg.carTrunk)" mode="aspectFill"></image>
						<view class="text">后备箱</view>
					</view>
					<view class="listimg" v-if="datalist.orderImg.carCenterConsole" @click="goImage(orderImg.carCenterConsole)">
						<image :src="showImg(orderImg.carCenterConsole)" mode="aspectFill"></image>
						<view class="text">仪表盘</view>
					</view>
					<view class="listimg" v-if="datalist.orderImg.xszFront" @click="goImage(orderImg.xszFront)">
						<image :src="showImg(orderImg.xszFront)" mode="aspectFill"></image>
						<view class="text">行车证正本</view>
					</view>
					<view class="listimg" v-if="datalist.orderImg.xszBack" @click="goImage(orderImg.xszBack)">
						<image :src="showImg(orderImg.xszBack)" mode="aspectFill"></image>
						<view class="text">行车证副本</view>
					</view>
					<view class="listimg" v-if="datalist.orderImg.jqBack" @click="goImage(orderImg.jqBack)">
						<image :src=" showImg(orderImg.jqBack)" mode="aspectFill"></image>
						<view class="text">交强险保单</view>
					</view>
					<view class="listimg" v-if="datalist.orderImg.carBak4" @click="goImage(orderImg.carBak4)">
						<image :src="showImg(orderImg.carBak4)" mode="aspectFill"></image>
						<view class="text">其他图片</view>
					</view>
					<view class="listimg" v-if="datalist.orderImg.carBak5" @click="goImage(orderImg.carBak5)">
						<image :src="showImg(orderImg.carBak5)" mode="aspectFill"></image>
						<view class="text">其他图片</view>
					</view>
				
					<!-- <view class="listimg" v-if="datalist.orderImg.carBak1" @click="goImage(orderImg.carBak1)">
						<image :src="showImg(orderImg.carBak1)" mode="aspectFill"></image>
						<view class="text">其他图片</view>
					</view> -->
					<!-- <view class="listimg" v-if="datalist.orderImg.carBak2" @click="goImage(orderImg.carBak2)">
						<image :src="showImg(orderImg.carBak2)" mode="aspectFill"></image>
						<view class="text">其他图片</view>
					</view>
					<view class="listimg" v-if="datalist.orderImg.carBak3" @click="goImage(orderImg.carBak3)">
						<image :src="showImg(orderImg.carBak3)" mode="aspectFill"></image>
						<view class="text">其他图片</view>
					</view>
				 -->
				</view>
			</view>
			<view class="pack" v-if="more" @click="more = false">
				收起
				<uni-icons type="arrowup"></uni-icons>
			</view>
			<view class="pack" v-else @click="more = true">
				展开全部
				<uni-icons type="arrowdown"></uni-icons>
			</view>
		</view>
		<view class="msglist" v-if="datalist.orderState == 18">
			<view class="title">还车码</view>
			<!-- <view class="list">
				检测费
				<text>¥{{datalist.stationFee}}</text>
			</view> -->
			<view class="list"><input type="text" v-model="carcard" placeholder-style="color:#fff;" placeholder="请输入还车码" maxlength="8" /></view>
		</view>
		<view class="botton">
			<view class="grab" @click="grab(datalist.id)" v-if="datalist.orderState == 1">抢单</view>
			<view class="grab" @click="grab1(datalist.id)" v-if="datalist.orderState == 3">去取车</view>
			<view class="grab" @click="grab2(datalist.id)" v-if="datalist.orderState == 6">取车</view>
			<view class="grab" @click="grab3(datalist.id)" v-if="datalist.orderState == 15">送车</view>
			<view class="grab" @click="grab4(datalist.id)" v-if="datalist.orderState == 18">还车</view>
			<view class="grab" @click="goorder_scan(datalist.id)" v-if="datalist.orderState == 18">扫描还车</view>
		</view>
	</view>
</template>

<script>
import { UniIcons } from '@/components/uni-icons/uni-icons.vue';
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
import order from '../../servers/order.js';
export default {
	components: {
		UniIcons,
		tkiQrcode
	},
	data() {
		return {
			more: false,
			datalist: [],
			carcard: '',
			orderImg:'',
			id: 0
		};
	},
	onLoad(e) {
		this.id = e.id;
		this.getdata();
	},
	mounted() {},
	methods: {
		getdata() {
			order.orderDetails(this.id).then(res => {
				this.datalist = res.data;
				this.orderImg=res.data.orderImg;
				console.log(this.datalist);
				var _this = this;
				if (res.data.orderState == 12) {
					setTimeout(function() {
						_this.$refs.qrcode._makeCode();
					}, 200);
				}
			});
		},
		grab(e) {
			order.grabOrder(e).then(res => {
				uni.showToast({
					title: '抢单成功',
					duration: 2000
				});
				uni.switchTab({
					url: '../index/index'
				});
			});
		},
		grab1(e) {
			order.goPickCar(e).then(res => {
				uni.showToast({
					title: res.msg,
					duration: 2000
				});
				uni.switchTab({
					url: '../index/index'
				});
			});
		},
		grab2(e) {
			uni.navigateTo({
				url: './pick?id=' + e
			});
		},
		grab3(e) {
			order.goCar(e).then(res => {
				this.datalist = [];
				uni.showToast({
					title: res.msg,
					duration: 2000
				});
				uni.switchTab({
					url: '../index/index'
				});
			});
		},
		grab4(e) {
			var da = {
				id: e,
				code: this.carcard,
			};
			order.returnCar(da).then(res => {
				uni.showToast({
					title: res.msg,
					duration: 2000
				});
				uni.switchTab({
					url: '../index/index?type=0'
				});
				// this.datalist=[]
				// this.getorder();
			});
		},
		gotel(){
			var customer_mobile = uni.getStorageSync('customer_mobile')
			uni.makePhoneCall({
			    phoneNumber: customer_mobile //仅为示例
			});
		},
		gotelSattion(e){
			//var customer_mobile = uni.getStorageSync('customer_mobile')
			uni.makePhoneCall({
			    phoneNumber: e //仅为示例
			});
		},
		goImage(e) {
			console.log(e);
			var check=e;
			e=this.imgUrl+e;
			
			 var array=[];
			 array.push(e);
			 if(this.orderImg.carFrontLeft&&this.orderImg.carFrontLeft!=check){
				  array.push(this.imgUrl+this.orderImg.carFrontLeft);
			 }
			 if(this.orderImg.carBackRight&&this.orderImg.carBackRight!=check){
			 				  array.push(this.imgUrl+this.orderImg.carBackRight);
			 }
			 if(this.orderImg.carTrunk&&this.orderImg.carTrunk!=check){
			 				  array.push(this.imgUrl+this.orderImg.carTrunk);
			 }
			 if(this.orderImg.carCenterConsole&&this.orderImg.carCenterConsole!=check){
			 				  array.push(this.imgUrl+this.orderImg.carCenterConsole);
			 }
			 if(this.orderImg.xszFront&&this.orderImg.xszFront!=check){
			 				  array.push(this.imgUrl+this.orderImg.xszFront);
			 }
			 if(this.orderImg.xszBack&&this.orderImg.xszBack!=check){
			 				  array.push(this.imgUrl+this.orderImg.xszBack);
			 }
			 if(this.orderImg.jqBack&&this.orderImg.jqBack!=check){
			 				  array.push(this.imgUrl+this.orderImg.jqBack);
			 }
			 if(this.orderImg.carBak4&&this.orderImg.carBak4!=check){
			 				  array.push(this.imgUrl+this.orderImg.carBak4);
			 }
			 if(this.orderImg.carBak5&&this.orderImg.carBak5!=check){
			 				  array.push(this.imgUrl+this.orderImg.carBak5);
			 }
			uni.previewImage({
				urls: array,
				longPressActions: {
					success: function(data) {}
				}
			});
		},
		gorouter(e) {
			console.log(e);
				console.log(e=='');
			if(e==''){
			   uni.showToast({
			   	title: "位置信息有误，请检查",
			   	duration: 2000
			   });
			   return 
			}
			
			const latitude = parseFloat(e.split(',')[1]);
			const longitude = parseFloat(e.split(',')[0]);
			console.log(latitude,longitude);
			uni.openLocation({
				latitude: latitude,
				longitude: longitude,
				success: function() {
					console.log('success');
				},
				fail:function(e){
					console.log(e);
				}
			});
		},
		goorder_scan(e){
			let that=this;
		    uni.scanCode({
				onlyFromCamera: true,
			    success: function (res) {
			        console.log('条码类型：' + res.scanType);
			        console.log('条码内容：' + res.result);
					var da = {
						id: e,
						code: res.result,
					};
					order.returnCar(da).then(res => {
					
							uni.showToast({
								title: res.msg,
								duration: 4000,
								complete() {
									uni.switchTab({
										url: '../index/index?type=0'
									});
								}
							});
						
						
					});
			    }
			});
		},
		showImg(e){
			console.log("图片地址信息为："+e)
			if (e) {
				return this.imgUrl + e;
			}else{
				return ''
			}
		}
	}
};
</script>

<style lang="less" scoped>
.order {
	color: #fff;
	padding-bottom: 50rpx;
	.msg {
		position: relative;
		z-index: 9;
		overflow: hidden;
		padding: 0 40rpx;
		height: 160rpx;
		line-height: 160rpx;
		background: linear-gradient(135deg, #7692bb 0%, #425985 100%);
		.type {
			font-size: 48rpx;
			image {
				float: right;
				width: 64rpx;
				height: 64rpx;
				margin-top: 59rpx;
			}
		}
		.bg1 {
			position: absolute;
			z-index: -1;
			top: -100rpx;
			right: 0;
			width: 250rpx;
			height: 561rpx;
			background: linear-gradient(180deg, #fce270 0%, #ffaa00 100%);
			border-top-left-radius: 500rpx;
			border-bottom-left-radius: 10rpx;
		}
		.bg2 {
			position: absolute;
			z-index: -2;
			top: -50rpx;
			right: 50rpx;
			width: 280rpx;
			height: 280rpx;
			background: linear-gradient(135deg, #7692bb 0%, #425985 100%);
			opacity: 0.7;
			border-radius: 50%;
		}
	}
	.msglist {
		margin: 30rpx 20rpx 0;
		padding: 40rpx;
		background: linear-gradient(135deg, #7692bb 0%, #425985 100%);
		border-radius: 20rpx;
		.title {
			font-size: 32rpx;
			padding-bottom: 30rpx;
			font-weight: 600;
			color: #ffffff;
			line-height: 45rpx;
			border-bottom: 1px solid #94a1b8;
		}
		.list {
			font-size: 26rpx;
			line-height: 67rpx;
			color: #f6f7f9;
			text {
				float: right;
			}
			.golden {
				color: #ffe471;
			}
			input {
				margin-top: 20rpx;
				font-size: 26rpx;
			}
			.imglist{
				overflow: hidden;
				.listimg {
					position: relative;
					float: left;
					background: #fff;
					width: 305rpx;
					// height: 265rpx;
					color: #ffffff;
					margin-bottom: 20rpx;
					image {
						width: 305rpx;
						height: 196rpx;
						display: block;
					}
					.text {
						width: 305rpx;
						height: 69rpx;
						background: #425985;
						text-align: center;
						font-size: 28rpx;
						font-weight: 500;
						line-height: 69rpx;
					}
				}
				.listimg:nth-child(2n) {
					margin-left: 20rpx;
				}
			}
		}
		.pack {
			font-size: 26rpx;
			text-align: center;
			color: #ffe471;
		}
	}
	.code {
		text-align: center;
		image {
			width: 220rpx;
			height: 220rpx;
			margin: 39rpx 0 20rpx;
		}
		.tip {
			font-size: 22rpx;
		}
	}
	.botton {
		margin: 30rpx 20rpx 0;
		.grab {
			text-align: center;
			line-height: 100rpx;
			border: 1px solid #ffff;
			border-radius: 20rpx;
		}
	}
}
</style>
